<template>
  <div class="container">
    <ul class="line-list">
      <li class="line" v-for="i in 35" :key="i"></li>
    </ul>
    <div class="info-wrap">
      <div class="info-item">
        <div class="info-name">收货人</div>
        <input v-model="dataForm.consignee" placeholder="请输入收货人姓名"/>
      </div>
      <div class="info-item">
        <div class="info-name">手机号码</div>
        <input type="number" v-model="dataForm.consigneeMobile" placeholder="请输入收货人手机号码"/>
      </div>
      <div class="info-item">
        <div class="info-name">是否国外地址</div>
        <radio-group class="radio-group" @change="abortAddressChange">
          <label class="radio">
            <radio :value="0" color="#44BDF5" :checked="dataForm.abroadAddress === 0"/>
            <span class="label">否</span>
          </label>
          <label class="radio">
            <radio :value="1" color="#44BDF5" :checked="dataForm.abroadAddress === 1"/>
            <span class="label">是</span>
          </label>
        </radio-group>
      </div>
      <template v-if="dataForm.abroadAddress === 0">
        <div class="info-item">
          <div class="info-name">省份</div>
          <picker mode="selector" :range="provinceList" range-key="regionName" @change="changeProvince"
                  :value="dataForm.provinceId">
            <input class="select" disabled v-model="dataForm.provinceName" placeholder="请选择省份"/>
          </picker>
          <img src="/static/images/common/right.png">
        </div>
        <div class="info-item">
          <div class="info-name">城市</div>
          <picker mode="selector" :range="cityList" range-key="regionName" @change="changeCity"
                  :value="dataForm.cityId">
            <input class="select" disabled v-model="dataForm.cityName" placeholder="请选择城市"/>
          </picker>
          <img src="/static/images/common/right.png">
        </div>
        <div class="info-item">
          <div class="info-name">区县</div>
          <picker mode="selector" :range="areaList" range-key="regionName" @change="changeArea"
                  :value="dataForm.areaId">
            <input class="select" disabled v-model="dataForm.areaName" placeholder="请选择区县"/>
          </picker>
          <img src="/static/images/common/right.png">
        </div>
        <div class="info-item">
          <div class="info-name">街道</div>
          <picker mode="selector" :range="streetList" range-key="regionName" @change="changeStreet"
                  :value="dataForm.streetId">
            <input class="select" disabled v-model="dataForm.streetName" placeholder="请选择街道"/>
          </picker>
          <img src="/static/images/common/right.png">
        </div>
      </template>
      <template v-else>
        <div class="info-item">
          <div class="info-name">国际件运费</div>
          <input type="number" v-model="dataForm.abroadLogisticsFee" placeholder="请输入国际件运费"/>
        </div>
        <div class="info-item">
          <div class="info-name">支付方式</div>
          <picker mode="selector" :range="payTypeList" range-key="payTypeStr" @change="changePay"
                  :value="dataForm.abroadLogisticsFeePayType">
            <input class="select" disabled v-model="dataForm.abroadLogisticsFeePayTypeStr" placeholder="请选择街道"/>
          </picker>
          <img src="/static/images/common/right.png">
        </div>
      </template>
      <div class="info-item">
        <div class="info-name">详细地址</div>
        <input class="detail" v-model="dataForm.consigneeAddress" placeholder="请输入收货人详细地址"/>
      </div>
    </div>
    <div class="btn" @click="toSelect">
      确定提交
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        provinceList: [],
        cityList: [],
        areaList: [],
        streetList: [],
        dataForm: {
          abroadAddress: 0,
          provinceName: "",
          cityName: "",
          areaName: "",
          streetName: "",
          abroadLogisticsFeePayTypeStr: ""
        },
        payTypeList: []
      };
    },
    async mounted() {
      wx.showLoading();
      const result = await wx.request({
        url: "/bg/payType/listPage",
        data: {
          page: 1,
          pageSize: 50
        }
      });
      wx.hideLoading();
      if (result.code === 200) {
        const list = [];
        result.data.rows.forEach(data => {
          list.push(_.pick(data, [ "payType", "payTypeStr" ]));
        });
        this.payTypeList = list;
      } else {
        wx.showToast(result.message);
      }
      const provinceResult = await wx.request({
        url: "/region/getTopRegions"
      });
      if (provinceResult.code === 200) {
        this.provinceList = provinceResult.data;
      }
      if (App.addressForm) {
        this.dataForm = App.addressForm;
      }
    },
    methods: {
      changePay(e) {
        const pay = this.payTypeList[ e.mp.detail.value ];
        this.dataForm.abroadLogisticsFeePayType = pay.payType;
        this.dataForm.abroadLogisticsFeePayTypeStr = pay.payTypeStr;
      },
      abortAddressChange(e) {
        console.info(e);
        this.dataForm.abroadAddress = parseInt(e.mp.detail.value);
      },
      async changeProvince(e) {
        const data = this.provinceList[ e.mp.detail.value ];
        this.dataForm.provinceId = data.regionId;
        this.dataForm.provinceName = data.shortName;
        const cityListResult = await wx.request({
          url: "/region/getChildRegions",
          data: {
            regionId: this.dataForm.provinceId
          }
        });
        if (cityListResult.code === 200) {
          this.cityList = cityListResult.data;
        }
      },
      async changeCity(e) {
        const data = this.cityList[ e.mp.detail.value ];
        this.dataForm.cityId = data.regionId;
        this.dataForm.cityName = data.shortName;
        const areaResult = await wx.request({
          url: "/region/getChildRegions",
          data: {
            regionId: this.dataForm.cityId
          }
        });
        if (areaResult.code === 200) {
          this.areaList = areaResult.data;
        }
      },
      async changeArea(e) {
        const data = this.areaList[ e.mp.detail.value ];
        this.dataForm.areaId = data.regionId;
        this.dataForm.areaName = data.shortName;
        const streetResult = await wx.request({
          url: "/region/getChildRegions",
          data: {
            regionId: this.dataForm.areaId
          }
        });
        if (streetResult.code === 200) {
          streetResult.data.shift({
            regionId: 0,
            shortName: "暂无"
          });
          this.streetList = streetResult.data;
        }
      },
      async changeStreet(e) {
        const data = this.streetList[ e.mp.detail.value ];
        this.dataForm.streetId = data.regionId;
        this.dataForm.streetName = data.shortName;
      },
      async toSelect() {
        if (!this.dataForm.consignee) {
          wx.showToast({
            title: "请输入收货人姓名",
            icon: "none"
          });
          return false;
        }
        if (!this.dataForm.consigneeMobile) {
          wx.showToast({
            title: "请输入收货人手机号码",
            icon: "none"
          });
          return false;
        }
        if (this.dataForm.abroadAddress === 0) {
          if (!this.dataForm.provinceName) {
            wx.showToast({
              title: "请选择省份",
              icon: "none"
            });
            return false;
          }
          if (!this.dataForm.cityName) {
            wx.showToast({
              title: "请选择城市",
              icon: "none"
            });
            return false;
          }
          if (!this.dataForm.areaName) {
            wx.showToast({
              title: "请选择区县",
              icon: "none"
            });
            return false;
          }
        } else {
          if (!this.dataForm.abroadLogisticsFee) {
            wx.showToast({
              title: "请输入国际件运费",
              icon: "none"
            });
            return false;
          }
          if (!this.dataForm.abroadLogisticsFeePayType) {
            wx.showToast({
              title: "请选择国际件运费支付方式",
              icon: "none"
            });
            return false;
          }
          this.dataForm.provinceId = 0;
          this.dataForm.provinceName = "";
          this.dataForm.cityId = 0;
          this.dataForm.cityName = "";
          this.dataForm.areaId = 0;
          this.dataForm.areaName = "";
          this.dataForm.streetId = 0;
          this.dataForm.streetName = "";
        }
        if (!this.dataForm.consigneeAddress) {
          wx.showToast({
            title: "请输入收货人详细地址",
            icon: "none"
          });
          return false;
        }
        App.addressForm = this.dataForm;
        wx.navigateBack();
      }
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .container {
    position: relative;

    .info-wrap {
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      .info-item {
        position: relative;
        border-bottom: pxToRem(1) solid #44BDF5;
        min-height: pxToRem(112);
        .info-name {
          @include middle-center-y();
          left: 0;
          font-size: pxToRem(28);
        }
        input, .radio-group {
          padding: pxToRem(30) pxToRem(30) pxToRem(30) pxToRem(200);
          font-size: pxToRem(28);
          line-height: pxToRem(40);
          &::-webkit-input-placeholder {
            color: #9B9B9B;
          }
          &.select {
            color: #4a4a4a;
          }
        }
        .radio {
          margin-right: pxToRem(50);
          font-size: pxToRem(28);
          .label {
            margin-left: pxToRem(5);
            font-size: pxToRem(28);
          }
        }
        image {
          @include middle-center-y();
          right: 0;
          width: pxToRem(14);
          height: pxToRem(26);
        }
      }
    }

    .btn {
      @include middle-center-x(fixed);
      bottom: pxToRem(120);
      width: pxToRem(518);
      height: pxToRem(98);
      line-height: pxToRem(98);
      text-align: center;
      background: linear-gradient(180deg, rgba(121, 224, 251, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(20);
      font-size: pxToRem(36);
      color: #fff;
    }
  }

  .line-list {
    display: flex;
    align-items: center;
    .line {
      margin-right: pxToRem(10);
      width: pxToRem(16);
      height: pxToRem(10);
      background-color: #C86B6D;
      transform: skew(-45deg);
      &:nth-child(2n) {
        background-color: #509BC4;
      }
    }
  }
</style>
